<template>
    <div id="footer">
        <ul>
            <router-link tag="li" to="/recommend">
                 <div class="icon recommend">
                </div>
                <span>推荐</span>
            </router-link>
             <router-link to="/bookcase" tag="li">
                <div class="icon bookcase">
                </div>
                <span>书架</span>
            </router-link>
            <router-link tag="li" to="/category">
                 <div class="icon category">
                </div>
                <span>分类</span>
            </router-link>
            <router-link tag="li" to="/mine">
                 <div class="icon rank">
                </div>
                <span>我的</span>
            </router-link>
        </ul>
    </div>
</template>

<script>
    export default {
        name:'Footer'
    }
</script>

<style lang='less' scoped>
@media screen and(min-width:420px){
    #footer{
        display: none
    }
}
#footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    background: white;
    border-top: 1px solid rgb(220, 220, 220);
    padding-top: 10px;
    height: 60px;
}
    ul{
        list-style: none;
        padding: 0;
        display: flex
    }
    li{
        margin: 0;
        padding: 0;
        flex: 1;
        text-align: center
    }
      li span{
        font-size: 14px
    }
    .icon{
        margin: 0 auto;
        width: 30px;
        height: 30px;
    }
    .bookcase{
         background: url(../assets/bookcase.png) top center no-repeat;
         background-size: 100% 100%
    }
    .router-link-exact-active .bookcase{
        background: url(../assets/bookcase_active.png) top center no-repeat;
        background-size: 100% 100%
    }

      .recommend{
         background: url(../assets/recommend.png) top center no-repeat;
         background-size: 100% 100%
    }
    .router-link-exact-active .recommend{
        background: url(../assets/recommend_active.png) top center no-repeat;
        background-size: 100% 100%
    }

     .category{
         background: url(../assets/category.png) top center no-repeat;
         background-size: 100% 100%
    }
    .router-link-exact-active .category{
        background: url(../assets/category_active.png) top center no-repeat;
        background-size: 100% 100%
        }

    .rank{
         background: url(../assets/mine.png) top center no-repeat;
         background-size: 100% 100%
    }
    .router-link-exact-active .rank{
        background: url(../assets/mine_active.png) top center no-repeat;
        background-size: 100% 100%
        }
    .router-link-exact-active{
        color: red
    }

   
</style>